<template>
  <div class="container home">
    <HeaderBar/>
    <van-tabs swipeable color="#FFFFFF" title-inactive-color="#CEE8F6" title-active-color="#FFFFFF">
      <van-tab title="推荐阅读">
        <homeIndex></homeIndex>
      </van-tab>
      <van-tab title="政策资讯">
        <news></news>
      </van-tab>
      <van-tab title="太阳能建筑">
        <sun></sun>
      </van-tab>
      <van-tab title="智慧能源">
        <power></power>
      </van-tab>
    </van-tabs>
    <footer-tabbar />
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex"; // createNamespacedHelpers
import HeaderBar from "components/HeaderBar";
import FooterTabbar from "components/FooterTabbar";
import HomeIndex from "components/Home/HomeIndex";
import News from "components/Home/News";
import Power from "components/Home/Power";
import Sun from "components/Home/Sun";
// const { mapActions } = createNamespacedHelpers('test') // 可使用这种方式直接获得test模板

export default {
  name: "home",
  data() {
    return {
      value: 1,
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
    };
  },
  components: {
    HeaderBar,
    FooterTabbar,
    HomeIndex,
    News,
    Sun,
    Power
  },
  computed: {
    ...mapState({
      loading: state => state["@@loading"].effects["test/onePlusAsync"]
    })
  },
  methods: {
    add() {
      this.onePlusAsync(this.value);
    },
    addOne() {
      this.onePlus(1);
    },
    // ...mapActions('home', ['initData', 'plusPage', 'initPage']),
    ...mapActions({
      onePlusAsync: "test/onePlusAsync"
    }),
    ...mapMutations({
      onePlus: "test/onePlus",
      logout: "user/LOGOUT"
    })
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: auto;
  width: 100%;
  padding-bottom: 50px;
  .bg-tit {
    background: #298fdc;
  }
}
.banner {
  width: 100%;
  height: auto;
  img {
    width: 100%;
    height: auto;
  }
}
.now-value {
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 16px;
  // line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-list {
  margin: 15px;
  font-size: 24px;
  .icon {
    margin: 0 10px;
  }
}
.buttons {
  padding: 0 15px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a {
    color: #333;
  }
}
</style>
<style>
.home .van-tabs__nav {
  background: #298fdc;
}
.home .van-hairline--top-bottom::after,
.home .van-hairline-unset--top-bottom::after {
  border: none;
}
</style>